import React, { Component } from 'react';
import {
  ScrollView,
  View,
  Text,
  StyleSheet,
  ImageBackground,
  Alert,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import { px2dp } from 'bee/utils/px2dp';
import { sizes, colors } from 'bee/themes';
import { ChooseBtn } from 'bee/components/MakePlan';
import { PrimaryBtn } from 'bee/components/Buttons';
import { CuttingLine } from 'bee/components/Line';
import { request } from 'bee/utils/request';
import { Attache } from 'bee/components/Attache';

// @flow
type prop = {
  // serviceSecialist: string,
  navigation: object,
};

export default class BankCardRecording extends Component<prop> {
  static defaultProps = {
    // serviceSecialist: 'zhouzhou', // 服务专员
    // money: '5678',
  };

  constructor() {
    super();
    this.state = {
      // 账户名
      username: '',
      // 银行名称
      bank: '',
      // 开户行所在省
      province: '',
      // 银行卡号
      cardNumber: null,
      // 银行名称下的转账限额
      transferLimit: '',
    };
  }

  // 渲染转账限额小字
  renderTransferLimitText() {
    return this.state.transferLimit ? (
      <Text
        style={[
          styles.tinyTextStyle,
          { lineHeight: px2dp(30), marginLeft: px2dp(41 - 17) },
        ]}
      >
        {this.state.transferLimit}
      </Text>
    ) : null;
  }

  render() {
    return (
      <View style={{ flex: 1, position: 'relative' }}>
        <ScrollView showsVerticalScrollIndicator style={styles.contentOuterBox}>
          {/* <Text style={styles.serviceSecialist}>
            服务专员：{this.props.serviceSecialist}
          </Text> */}
          <Attache />
          <View style={styles.generalBox}>
            <Text style={styles.titleTextStyle}>添加银行卡</Text>
            {/* 分割线 */}
            <CuttingLine />
            {/* 拍照上传区 */}
            <View style={styles.pictureBoxStyle}>
              <TouchableOpacity
                onPress={() => {
                  request('/bankcard').then(data => {
                    const { body } = data;
                    console.log(data);
                    this.setState({
                      username: body.username,
                      bank: body.bank,
                      province: body.province,
                      cardNumber: body.cardNumber,
                      transferLimit: body.transferLimit,
                    });
                  });
                }}
              >
                <ImageBackground style={styles.pictureStyle} onPress={() => {}}>
                  <Text style={styles.pictureTextStyle}>请点击拍照</Text>
                </ImageBackground>
              </TouchableOpacity>
              <View style={styles.underPicutreTextBox}>
                <Text style={styles.tinyTextStyle}>该转账收费仅支持储蓄卡</Text>
                <Text
                  style={[styles.smallTextStyle, { marginLeft: px2dp(21) }]}
                  //   onPress={()=>{}} 链接至转账限额静态页面
                >
                  限额说明
                </Text>
              </View>
            </View>

            {/* 分割线 */}
            <CuttingLine />

            {/* 姓名 */}
            <View style={styles.itemLineStyle}>
              <Text style={[styles.smallTextStyle, styles.normalLineHeight]}>
                姓名
              </Text>
              <TextInput
                underlineColorAndroid="transparent"
                clearTextOnFocus
                enablesReturnKeyAutomatically="true"
                keyboardType="default"
                value={this.state.username}
                style={[styles.smallTextStyle, styles.textInputStyle]}
                onChangeText={name => {
                  this.setState({
                    username: name,
                  });
                }}
              />
            </View>

            {/* 分割线 */}
            <CuttingLine />

            {/* 银行 */}
            <View style={styles.itemLineStyle}>
              <Text style={[styles.smallTextStyle, styles.normalLineHeight]}>
                银行
              </Text>
              <ChooseBtn onPress={() => {}} text={this.state.bank} />
            </View>

            {this.renderTransferLimitText()}

            <CuttingLine />

            {/* 开户行所在省份 */}
            <View style={styles.itemLineStyle}>
              <Text style={[styles.smallTextStyle, styles.normalLineHeight]}>
                开户行所在省份
              </Text>
              <ChooseBtn onPress={() => {}} text={this.state.province} />
            </View>

            <CuttingLine />

            {/* 卡号 */}
            <View style={styles.itemLineStyle}>
              <Text style={[styles.smallTextStyle, styles.normalLineHeight]}>
                卡号
              </Text>
              <TextInput
                underlineColorAndroid="transparent"
                keyboardType="numeric"
                style={[styles.smallTextStyle, styles.textInputStyle]}
                onChangeText={code => {
                  this.setState({
                    cardNumber: code,
                  });
                }}
              >
                {this.state.cardNumber}
              </TextInput>
            </View>
          </View>
        </ScrollView>
        <View style={styles.buttonStyle}>
          <PrimaryBtn
            text="保存"
            onPress={() => {
              // 校验信息完整性
              if (
                this.state.bank === null ||
                this.state.bank === '' ||
                this.state.cardNumber === null ||
                this.state.cardNumber === '' ||
                this.state.province === null ||
                this.state.province === '' ||
                this.state.username === null ||
                this.state.username === '' ||
                this.state.transferLimit === null ||
                this.state.transferLimit === ''
              ) {
                Alert.alert('请确认信息完整');
                return;
              }

              // 将数据传回前向页面
              this.props.navigation.state.params.callback({
                username: this.state.username,
                bank: this.state.bank,
                province: this.state.province,
                cardNumber: this.state.cardNumber,
                transferLimit: this.state.transferLimit,
              });
              this.props.navigation.goBack();
            }}
            bgc={colors.white}
            fontColor={colors['1102']}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  serviceSecialist: {
    lineHeight: px2dp(61),
    textAlign: 'center',
    fontSize: px2dp(22),
    color: colors['1103'],
  },
  contentOuterBox: {
    paddingHorizontal: px2dp(30),
    marginBottom: px2dp(10),
    height: px2dp(640),
  },
  generalBox: {
    borderRadius: px2dp(20),
    backgroundColor: colors.white,
    paddingHorizontal: px2dp(17),
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors['1104'],
  },
  titleTextStyle: {
    fontSize: sizes.f3,
    color: colors['1101'],
    lineHeight: px2dp(80),
    marginHorizontal: px2dp(41 - 17),
  },

  pictureStyle: {
    height: px2dp(160),
    width: px2dp(240),
    backgroundColor: colors['1105'],
    margin: px2dp(22),
  },
  pictureTextStyle: {
    lineHeight: px2dp(160),
    fontSize: sizes.f0,
    color: colors['1102'],
    textAlign: 'center',
  },
  pictureBoxStyle: {
    alignItems: 'center',
  },
  underPicutreTextBox: {
    marginBottom: px2dp(19),
    flexDirection: 'row',
  },
  tinyTextStyle: {
    fontSize: sizes.f0,
    color: colors['1103'],
  },
  smallTextStyle: {
    fontSize: sizes.f1,
    color: colors['1101'],
  },
  itemLineStyle: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginHorizontal: px2dp(41 - 17),
  },
  normalLineHeight: {
    lineHeight: px2dp(69),
  },
  buttonStyle: {
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors['1104'],
    position: 'absolute',
    bottom: 0,
    width: '100%',
  },
  textInputStyle: {
    height: px2dp(69),
    textAlign: 'center',
    // underlineColorAndroid: 'transparent',
    padding: 0,
  },
});
